<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
    <link rel="stylesheet" href="/layer-css.css"/>
    <link rel="stylesheet" href="/admin/css/other/console2.css"/>
    <style>
        .centered {
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .pear-container {
            margin: 15px;
            width: calc(100vw - 30px);
        }

        .pear-card {
            width: 170px;
            height: 68px;
            display: flex;
            flex-direction: row;
            align-items: center;
            margin-bottom: 0px;
        }

        .pear-card:not(:first-child) {
            margin-left: 30px;
        }

        .pear-card-icon {
            width: 52px;
            height: 52px;
            margin-left: 14px;
            margin-right: 20px;
        }

        .pear-card-icon-lockStop {
            width: 24px;
            height: 24px;
            margin-right: 8px;
        }

        .realTimeControlInformation {
            width: 100%;
            height: 490px;
            background: #F8F8F9;
            border-radius: 10px 10px 10px 10px;
            border: 1px solid #D8E1E8;
            font-size: 16px;
            color: #707070;
        }

        .realTimeControlInformation .info {
            margin-top: 20px;
        }

        .denseShelfImage {
            width: 100px;
            height: 490px;
        }

        .frameImage {
            position: relative;
            display: inline-block;
            margin-left: 2vh;
        }

        .denseRackNumber {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 24px;
            font-weight: bold;
            background-color: rgba(0, 0, 0, 0.5);
            padding: 10px;
            border-radius: 5px;
        }

        .fixedInformationIdentification {
            position: absolute;
            top: 16.5%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            font-size: 12px;
            font-weight: bold;
            border-radius: 5px;
            text-align: center;
        }


        .test1 img {
            transition: transform 0.2s, opacity 0.2s; /* 设置过渡效果 */
        }

        .test1 img:active {
            transform: scale(0.9); /* 点击时图片缩小 */
            opacity: 0.7; /* 点击时改变图片的透明度 */
        }

        .infoDiv {
            width: 80px;
        }
    </style>
    <style>
        /* 之前的CSS代码保持不变 */
        @keyframes example {
            from {
                transform: scale(0.8);
            }
            to {
                transform: scale(1);
            }
        }

        .animate {
            animation: example 0.5s infinite alternate;
        }
    </style>
</head>
<body class="pear-container">
<div class="layui-row manualControl layui-col-space15">
    <div class="layui-col-xs12 layui-col-md12">
        <div class="layui-card" style="border-radius: 6px 6px 6px 6px;">
            <div class="layui-card-body">
                <div class="layui-row centered" style="margin-left: 12px;margin-top: 6px;">
                    <div style="width: 4px;height: 20px;background: #2176FF;"></div>
                    <div style="margin-left: 10px;height: 27px;font-weight: 500;font-size: 18px;color: #000000;line-height: 27px;">
                        公告设置
                    </div>
                </div>
                <div class="layui-row"
                     style="display: flex;flex-direction: column;margin-top: 5px;margin-left: 12px;">
                    <img src="/img/HandMovement/网格.png" alt="" style="max-width: 100%;">
                </div>
                <div class="layui-row layui-col-space5" style="margin-top: 24px;margin-bottom: 12px">
                    <form class="layui-form" action="" onsubmit="return false">
                        <div class="layui-form-item">
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">选择库房</label>
                                <div class="layui-input-inline">
                                    <input type="number" id="archiveArea" name="archiveArea" lay-verify="required"
                                           lay-reqtext="请选择库房位置"
                                           style="display:none;width: 0px" autocomplete="off" class="layui-input">
                                    <ul id="areaTree" class="dtree" data-id="0"></ul>
                                </div>
                            </div>
                            <div class="layui-form-item layui-inline">
                                <label class="layui-form-label">选择载体</label>
                                <div class="layui-input-inline">
                                    <select name="hostId" lay-filter="carrierSelect" id="carrierSelect"
                                            lay-verify="required"
                                            lay-reqtext="请选择载体设备" lay-search>
                                        <option value="">请选择载体设备</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <div class="layui-card" style="border-radius: 6px 6px 6px 6px;">
            <div class="layui-card-body">
                <table id="notice-table" lay-filter="notice-table"></table>
            </div>
        </div>
    </div>
</div>
<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script type="text/html" id="notice-bar">
    <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit">修改</button>
</script>
<script>
    layui.use(['form', 'jquery', 'loading', 'dtree','table'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;
        let areaId = "";
        let hostId = "";
        let table = layui.table;

        // dtree插件下拉框点击空白处隐藏
        $(document).bind("click", function (e) {
            var e = e || window.event;    //事件对象，兼容IE
            var target = e.target || e.srcElement;  //源对象，兼容火狐和IE
            if ($(target).prop("class").indexOf("layui-card") == -1) {
                $(".dtree-select-show").removeClass("dtree-select-show");
            }
        })
        // 初始化区域树
        dtree.render({
            elem: "#areaTree",
            initLevel: "1",//默认展开层级为1
            width: "100%",
            method: 'get',
            dataStyle: "layuiStyle",  //使用layui风格的数据格式
            // response:{message:"msg",statusCode:200},  //修改response中返回数据的定义
            url: "/archives/area/buildAreaTree/table",
            dataFormat: "list",  //配置data的风格为list
            select: true, //指定下拉树模式
            selectTips: "请选择库房位置",
            selectCardHeight: "230"
        });
        dtree.on("node('areaTree')", function (obj) {
            hostId = "";
            column = "";
            var param = dtree.getNowParam("areaTree");
            areaId = param.nodeId;
            $.ajax({
                url: "/host/get/list?areaId=" + areaId,
                type: "get",
                dataType: "json",
                success: function (result) {
                    carrierSelect = result.data;
                    let carrierSelectHtml = "<select name='hostId' lay-verify='required' lay-reqtext='请选择载体设备' lay-search>";
                    carrierSelectHtml += "<option value=''>请选择载体设备</option>";
                    for (let i = 0; i < carrierSelect.length; i++) {
                        let item = carrierSelect[i];
                        carrierSelectHtml += "<option value='" + item.id + "'>载体名称:" + item.cabinetName + " 区号:" + item.cabinetNumber + "</option>";
                    }
                    carrierSelectHtml += "</select>";
                    $("#carrierSelect").html(carrierSelectHtml);
                    form.render("select");
                }
            });
        });

        // 选择载体
        form.on('select(carrierSelect)', function (data) {
            var value = data.value;
            if (value === "") {
                return false;
            }
            hostId = value;
            table.reload('notice-table', {
                where: {
                    "hostId": hostId
                }
            });
        });

        function reqeustUtil(url, data) {
            let loading = layer.load();
            $.ajax({
                url: url,
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                type: "POST",
                data: JSON.stringify(data),
                success: function (result) {
                    layer.close(loading);
                    if (result.code === 200) {
                        layer.msg(result.message, {icon: 1, time: 3000});
                    } else {
                        layer.msg(result.message, {icon: 2, time: 3000});
                    }
                }
            })
        }

        // 公告下发
        form.on('submit(announcementIssued)', function (data) {
            if (hostId === "") {
                layer.msg("请选择载体设备", {icon: 2, time: 3000});
                return false;
            }
            if (column === "") {
                layer.msg("请选择列", {icon: 2, time: 3000});
                return false;
            }
            reqeustUtil();
            console.log(data.field);
        });
        let cols = [
            [
                {title: '载体名称', field: 'hostName', align: 'center'},
                {title: '区号', field: 'hostNumber', align: 'center',templet: function (d) {
                        return '<span style="color: #40bb9c ;">' + d.hostNumber + '区</span>';
                    }
                },
                {title: '列', field: 'column_number', align: 'center'},
                {title: '公告内容', field: 'notice_content', align: 'center'},
                {title: '创建时间', field: 'create_time', align: 'center'},
                {title: '修改时间', field: 'update_time', align: 'center'},
                {title: '操作', toolbar: '#notice-bar', align: 'center', width: 220}
            ]
        ]
        tableIns = table.render({
            elem: '#notice-table',
            url: '/notice/list',
            page: true,
            cols: cols,
            skin: 'line',
            toolbar: '#carrier-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports'],
            id: 'notice-table',
            // height: 'full-165',
            //解决页码的问题
            done: function (res) {
                // 获得当前页码
                var brforeCurr = tableIns.config.page.curr;
                // 获得当前页的记录数
                var dataLength = table.cache['notice-table'].length;
                var count = res.count; // 获得总记录数
                //如果当前页的记录数为0并且总记录数不为0
                if (dataLength === 0 && count !== 0) {
                    // 刷新表格到上一页
                    table.reload("notice-table", {
                        page: {
                            curr: brforeCurr - 1
                        }
                    });
                }
            }
        });

        table.on('tool(notice-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        window.edit = function (obj) {
            parent.layer.open({
                title: ['修改 <span style="color: #ff5722;">' + obj.data.hostName + '</span> 设备公告', 'font-size: 16px;'],
                type: 2,
                offset: 'r',
                anim: 'slideLeft', // 从右往左
                area: ['40%', '100%'],
                shade: 0.5,
                maxmin: true,
                id: 'addNewEquipment',
                content: '/notice/edit?noticeId=' + obj.data['id'],
                move: false,
                end: function () {
                    table.reload('notice-table');
                }
            });
        }


        table.on('toolbar(notice-table)', function (obj) {
            if (obj.event === 'refresh') {
                window.refresh();
            }
        });

        window.refresh = function (param) {
            table.reload('notice-table');
        }
    });
</script>
</body>
</html>